<%@ page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath"
	value="${pageContext.servletContext.contextPath}" /> 
<!doctype html>
<html lang="en">
<head>
<title>Destinations by continent</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="${contextPath}/styles/default.css" />
<style>
#continents {
	border-style: none;
}

area {
	border: none;
	outline: none;
}
</style>
</head>
<body>
	<header>
		<c:import url="/WEB-INF/JSP/menu.jsp" />
		<h1>Destinations by continent</h1>
	</header>
	<h2>
		<label for="continents">Choose a continent</label>
	</h2>
	<img src="${contextPath}/images/continents.png" width="400"
		height="185" alt="continents" id="continents" ismap
		usemap="#continentsMap" title="Choose a continent" />
	<map id="continentsMap" name="continentsMap">
		<c:url value="/continents/1/destinations" var="northAmericaURL" />
		<area shape="rect" coords="0,0,137,87" href="${northAmericaURL}"
			title="North America">
		<c:url value="/continents/2/destinations" var="southAmericaURL" />
		<area shape="rect" coords="58,87,116,172" href="${southAmericaURL}"
			title="South America">
		<c:url value="/continents/3/destinations" var="europeURL" />
		<area shape="rect" coords="138,13,217,55" href="${europeURL}"
			title="Europe">
		<c:url value="/continents/4/destinations" var="africaURL" />
		<area shape="rect" coords="136,55,216,146" href="${africaURL}"
			title="Africa">
		<c:url value="/continents/5/destinations" var="asiaURL" />
		<area shape="rect" coords="214,5,328,97" href="${asiaURL}"
			title="Asia">
		<c:url value="/continents/6/destinations" var="australiaURL" />
		<area shape="rect" coords="285,102,364,161" href="${australiaURL}"
			title="Australia">
	</map>
	<c:if test="${not empty continent}">
		<h2>Destinations in ${continent.name}</h2>
		<c:choose>
			<c:when test="${not empty continent.destinations}">
				<ul>
					<c:forEach var="destination" items="${continent.destinations}">
						<c:url value="/destinations" var="destinationURL">
							<c:param name="destination" value="${destination.name}" />
						</c:url>
						<li><a href="${destinationURL}">${destination.name}</a></li>
					</c:forEach>
				</ul>
			</c:when>
			<c:otherwise>
				<div class="error">No destinations found</div>
			</c:otherwise>
		</c:choose>
	</c:if>
</body>
</html>
